import { getToken, setToken, removeToken, setTimeStamp } from '@/utils/auth'
import { login, getUserInfo, getUserDetailById } from '@/api/user'
const state = {
  // 1.为了vuex 的持久化  所以初始化的时候就从本地存储去获取
  token: getToken(), // 设置token为共享状态
  // 为了保持数据的一致性 防止使用属性或方法报错
  // 拓展：?. 名称： 可选链 obj.name?.user
  userInfo: {}// 用户信息 这里定义一个空对象
}
const mutations = {
  setToken(state, token) { // 这里的setToken只是mutations中的一个方法 和上面引入的无关
    // 2.为了vuex的持久化 所以每当vuex更新时  本地存储也要同步更新
    // 第一个参数 state 第二个参数 ：形参
    // 修改 vuex中 state的值
    state.token = token
    // 本地修改
    setToken(token) // 这里使用的是上面引入的方法
  },
  removeToken(state) { // 这里的removeToken 只是方法名
    // 清除token
    state.token = null
    // 本地修改
    removeToken()
  },
  setUserInfo(state, result) {
    // 更新一个对象
    state.userInfo = result // 这样是响应式
  },
  removeUserInfo(state) {
    state.userInfo = {}
  }
}
const actions = {
  async login(context, data) {
    // 调用api 的接口
    const result = await login(data)
    context.commit('setToken', result)
    setTimeStamp()
  },
  async getUserInfo(context) {
    const result = await getUserInfo()
    // 获取用户的详情 用户的详情数据
    const baseInfo = await getUserDetailById(result.userId)
    context.commit('setUserInfo', { ...result, ...baseInfo }) // 提交到mutations里
    return result
  },
  logout(context) {
    // 删除token
    context.commit('removeToken') // 不仅删除了vuex中的 还删除了缓存的
    context.commit('removeUserInfo')// 删除用户信息（防止换账号登录 不重新获取账号信息）
  }
}
export default {
  // 可以不写 但是推荐写
  // 如果不写的话 就必须使用state.属性名 如果写的话就必须是state.模块名.属性名
  namespaced: true,
  state,
  mutations,
  actions
}
